
<template>
    <div class="app-container">

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="header-item">我的个人信息</div>
            </div>
            <div class="tb-body">
                <el-form ref="editModalForm" :rules="editModalFormRules" :model="formData" label-width="140px" size="mini">

                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="账号" prop="UserName">
                                <el-input v-model.trim="formData.UserName" :disabled='formData.Id != null'></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密码" prop="Password">
                                <el-input type="password" v-model.trim="formData.Password"></el-input>
                            </el-form-item>
                        </el-col>


                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="Email">
                                <el-input v-model.trim="formData.Email"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系方式" prop="PhoneNumber">
                                <el-input v-model.trim="formData.PhoneNumber"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="姓名" prop="Name">
                                <el-input v-model.trim="formData.Name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="图片" prop="ImageUrls">
                                <el-upload-images :limit="1" v-model="formData.ImageUrls"></el-upload-images>
                            </el-form-item>
                        </el-col>


                    </el-row>


                    <el-row type="flex" justify="end" align="bottom">
                        <el-form-item>
                            <el-button type="primary" plain @click="SubmitUserForm()">确 定</el-button>

                        </el-form-item>
                    </el-row>
                </el-form>
            </div>

        </el-card>




    </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";

export default {
    name: "UserList",
    computed: {
        ...mapGetters(["theme", "userId"]),
    },
    data() {

        return {
            lock: 0,
            searchForm: {},
            dataColum: [
                {
                    key: "Id",
                    hidden: true,

                },
                {
                    key: "UserName",
                    title: "账号",
                    type: store.getters.columnType.SHORTTEXT,

                },

                {
                    key: "Email",
                    title: "邮箱",
                    type: store.getters.columnType.SHORTTEXT,

                },
                {
                    key: "ImageUrls",
                    title: "图片",
                    type: store.getters.columnType.IMAGES,

                },
                {
                    key: "Name",
                    title: "姓名",
                    type: store.getters.columnType.SHORTTEXT,

                },

                {
                    key: "PhoneNumber",
                    title: "手机号",
                    type: store.getters.columnType.PHONE,

                },


                {
                    key: "RoleTypeFormat",
                    title: "所属角色",
                    type: store.getters.columnType.SHORTTEXT,

                },

                {
                    title: "操作",
                    type: store.getters.columnType.USERDEFINED,
                },
            ],
            editModalFormRules: {
                "Email": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                    {

                        validator: (rule, value, callback) => {
                            var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,4})+$/;
                            if (!value || !reg.test(value)) {
                                callback(new Error('请输入正确的邮箱!'));
                            }
                            else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ],
                "Password": [{ required: true, message: '该项为必填项', trigger: 'blur' },
                {

                    validator: (rule, value, callback) => {
                        var reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
                        if (!value || !reg.test(value)) {
                            callback(new Error('密码至少包含一个字母和一个数字，且长度至少为8个字符!'));
                        }
                        else {
                            callback();
                        }
                    }, trigger: 'blur'
                }],
                "Name": [{ required: true, message: '该项为必填项', trigger: 'blur' },
                {

                    validator: (rule, value, callback) => {
                        var reg = /^[\u4e00-\u9fa5]{1,5}$/;
                        if (!value || !reg.test(value)) {
                            callback(new Error('请输入正确的姓名'));
                        }
                        else {
                            callback();
                        }
                    }, trigger: 'blur'
                }],
                "PhoneNumber": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                    {

                        validator: (rule, value, callback) => {
                            var reg = /^1[3-9]\d{9}$/;
                            if (!value || !reg.test(value)) {
                                callback(new Error('请输入正确的手机号码!'));
                            }
                            else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ],
            },
            formData: {

            },
            editorShow: false,

        };
    },
    created() {
        this.ShowEditUserModal();
    },
    methods: {
        async ShowEditUserModal() {

            let { Data: UserInfo } = await this.$Post(`/User/Get`, { Id: this.userId });
            this.formData = UserInfo;
            this.editorUserShow = true;
        },
        async SubmitUserForm() {
            this.$refs.editModalForm.validate(async (valid) => {
                if (valid) {
                    let { Success } = await this.$Post("/User/CreateOrEdit", this.formData)
                    if (Success) {
                        await store.dispatch('user/GetByToken');
                        this.$message.success("修改个人信息成功");
                    }
                }
            });
        },


    },
};
</script>

